<template>
  <div class="wrapper" ref="boxRef" :class="isMobile ? 'mobile' : 'web'">
    <!-- <HeaderContent :bannerConf="bannerConf" :readonly="true" /> -->
    <div class="content">
      <SubTitle :metaData="metaData" :readonly="true"></SubTitle>
      <MainTitle :bannerConf="bannerConf" :readonly="true"></MainTitle>
      <MainRenderer ref="mainRef" :renderData="renderData"></MainRenderer>
      <!-- <LogoIcon :logo-conf="logoConf" :readonly="true" /> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { get as _get } from 'lodash-es'
import { useStore } from 'vuex'
// import { useRouter } from 'vue-router'
// @ts-ignore
import communalLoader from '@materials/communals/communalLoader.js'
import MainRenderer from './MainRenderer.vue'
// import { loadLocalPage } from '@/management/api/eco/appcenter'

interface Props {
  questionInfo?: any
  isMobile?: boolean
}

withDefaults(defineProps<Props>(), {
  questionInfo: {},
  isMobile: false
})

// const HeaderContent = communalLoader.loadComponent('HeaderContent')
const MainTitle = communalLoader.loadComponent('MainTitle')
// const SubTitle = communalLoader.loadComponent('SubTitle')
// const LogoIcon = communalLoader.loadComponent('LogoIcon')

const mainRef = ref<any>()
const boxRef = ref<HTMLElement>()

const store = useStore()

const bannerConf = computed(() => store.state?.preview?.bannerConf || {})
const metaData = computed(() => store.state?.preview?.metaData || {})
// const logoConf = computed(() => store.state?.preview?.bottomConf || {})
// const dataConf = computed(() => _get(store, 'state.preview.dataConf.dataList', []))
// const surveyPath = computed(() => store.state?.preview?.surveyPath || '')
// const formResult = computed(() => {
//   let list = store.state?.preview?.formResult || []
//   return list.map((item: any) => {
//     return {
//       ...item
//     }
//   })
// })
const renderData = computed(() => {
  const questionSeq = store.state?.preview?.questionSeq || []
  const questionData = store.state?.preview?.questionData || []
  let index: number = 1
  return (
    questionSeq &&
    questionSeq.reduce((pre: any, item: any) => {
      const questionArr: any = []

      item.forEach((questionKey: any) => {
        const question = { ...questionData[questionKey] }
        // 开启显示序号
        if (question.showIndex) {
          question.indexNumber = index++
        }

        questionArr.push(question)
      })

      if (questionArr && questionArr.length) {
        pre.push(questionArr)
      }

      return pre
    }, [])
  )
})

</script>
<style scoped lang="scss">
.index {
  min-height: 100%;

  .wrapper {
    min-height: 100%;
    background-color: var(--primary-background-color);
    display: flex;
    flex-direction: column;

    .content {
      flex: 1;
      margin: 0 0.3rem;
      background: var(--primary-background-color);
      border-radius: 8px 8px 0 0;
      height: 100%;
    }
  }
}
</style>
